<template>
  <div class="ebook-slide-contents">
    <div class="slide-contents-search-wrapper">
      <div class="slide-contents-search-input-wrapper">
        <div class="slide-contents-search-icon">
          <span class="icon-search"></span>
        </div>
        <input
          type="text"
          class="slide-contents-search-input"
          @click="showSearchPage"
          @keyup.enter.exact="search()"
          :placeholder="$t('book.searchHint')"
          v-model="searchText"
        />
      </div>
      <div
        class="slide-contents-search-cancel"
        @click="hideSearchPage()"
        v-if="searchVisible"
      >
        {{ $t('book.cancel') }}
      </div>
    </div>
    <div class="slide-contents-book-wrapper" v-show="!searchVisible">
      <!-- 书面 -->
      <div class="slide-contents-book-img-wrapper">
        <img :src="cover" alt="" class="slide-contents-book-img" />
      </div>
      <!-- 电子书信息 -->
      <div class="slide-contents-book-info-wrapper">
        <div class="slide-contents-book-title">
          <span class="slide-contents-book-title-text">{{
            metadata.title
          }}</span>
        </div>
        <div class="slide-contents-book-author">
          <span class="slide-contents-book-author-text">{{
            metadata.creator
          }}</span>
        </div>
      </div>
      <!-- 阅读时间 -->
      <div class="slide-contents-book-progress-wrapper">
        <div class="slide-contents-book-progress">
          <span class="progress">{{ progress + '%' }}</span>
          <span class="progress-text">{{ $t('book.haveRead2') }}</span>
        </div>
        <div class="slide-contents-book-time">{{ getReadTimeText() }}</div>
      </div>
    </div>
    <!-- 目录模块 -->
    <scroll
      class="slide-contents-list"
      :top="156"
      :bottom="48"
      v-show="!searchVisible"
    >
      <!-- 内容 -->
      <div
        class="slide-contents-item"
        v-for="(item, index) in navigation"
        :key="index"
      >
        <!-- 标签信息 -->
        <span
          class="slide-contents-item-label"
          :class="{ selected: section === index }"
          :style="contentItemStyle(item)"
          @click="displayContent(item.href, index)"
        >
          {{ item.label }}
        </span>
        <!-- 页数信息 -->
        <span class="slide-contents-item-page">{{item.page}}</span>
      </div>
    </scroll>
    <!-- 搜索结果区 -->
    <scroll
      class="slide-search-list"
      :top="66"
      :bottom="48"
      v-show="searchVisible"
    >
      <div
        class="slide-search-item"
        v-for="(item, index) in searchList"
        :key="index"
        v-html="item.excerpt"
        @click="displayContent(item.cfi, section, true)"
      ></div>
    </scroll>
  </div>
</template>
<script>
import { ebookMixin } from '@/utils/mixin.js'
import scroll from '../common/Scroll.vue'
import { px2rem } from '../../utils/utils'
export default {
  mixins: [ebookMixin],
  components: {
    scroll
  },
  data() {
    return {
      searchVisible: false, // 界面显示和隐藏
      searchList: null, // 搜索结果
      searchText: '' // 搜索文本
    }
  },
  methods: {
    //   点击取消触发
    hideSearchPage() {
      this.searchVisible = false
      this.searchList = null // 清空结果
      this.searchText = '' // 清空搜索框
    },
    // 点击input 触发
    showSearchPage() {
      this.searchVisible = true
    },
    // 实现子目录缩进
    contentItemStyle(item) {
      return {
        marginLeft: `${px2rem(item.level * 15)}rem`
      }
    },
    // 点击目录跳转功能
    displayContent(target, index, highlight = false) {
      this.display(target, () => {
        // 利用回调函数调用
        this.hideTitleAndMenu()
        if (highlight) {
          this.currentBook.rendition.annotations.highlight(target)
        }
      })
      this.setSection(index)
      console.log(this.section + '当前的sectino')
    },
    // epubjs官方提供了doSearch方法来实现全文搜索
    doSearch(q) {
      // 实现原理
      return Promise.all(
        // spineItems 表示是我们的 Section
        this.currentBook.spine.spineItems.map((section) =>
          section
            // 调用load方法 将上下文传进去 此时section 对象就拿到了资源 获取到文本信息
            .load(this.currentBook.load.bind(this.currentBook))
            // 获取到信息调用find方法 传入搜索关键字q 就可以实现全文 当前 章节的检索
            .then(section.find.bind(section, q))
            // 当异步执行完 执行该方法 unload将资源进行释放 就不会占用内存
            .finally(section.unload.bind(section))
        )
        // 将结果进行了 promise处理 同时将一个多维数组转化为一维数组
      ).then((results) => Promise.resolve([].concat.apply([], results)))
    },
    // 按下回车触发
    search() {
      if (this.searchText && this.searchText.trim().length > 0) {
        this.doSearch(this.searchText).then((list) => {
          this.searchList = list
          console.log(this.searchList)
          this.searchList.forEach((item) => {
            // console.log(item.excerpt)
            item.excerpt = item.excerpt.replace(this.searchText, `<span class="content-search-text">${this.searchText}</span>`)
            return item
          })
        })
      }
    }
  },
  mounted() {
    // 当电子书加载完成再调用 doSearch
    // this.currentBook.ready.then(() => {
    //   // doSearch 方法是通过异步返回结果的
    //   this.doSearch('ac').then(result => {
    //     console.log(result)
    //     this.searchList = result
    //   })
    // this.currentBook.spine.spineItems.map((section) => {
    /*
        打印出很多 section 和目录是一一对应的
        内容和目录和相似
        但是它的用途和目录是有所不同的
        section 是管理章节下 所有的文本内容
        */
    // console.log(section)
    // })
    // })
  }
}
</script>

<style lang='scss' scoped>
@import '../../assets/style/global';
.ebook-slide-contents {
  width: 100%;
  //   小技巧
  font-size: 0;
  .slide-contents-search-wrapper {
    display: flex;
    width: 100%;
    height: px2rem(36);
    margin: px2rem(20) 0 px2rem(10) 0;
    padding: 0 px2rem(15);
    .slide-contents-search-input-wrapper {
      flex: 0.9;
      @include center;
      .slide-contents-search-icon {
        flex: 0 0 px2rem(28);
        font-size: px2rem(12);
        @include center;
      }
      .slide-contents-search-input {
        flex: 1;
        width: 100%;
        height: px2rem(32);
        font-size: px2rem(14);
        background: transparent;
        border: none;
        &:focus {
          outline: none;
        }
      }
    }
    .slide-contents-search-cancel {
      flex: 0 0 px2rem(50);
      font-size: px2rem(14);
      @include right;
    }
  }
  .slide-contents-book-wrapper {
    display: flex;
    width: 100%;
    height: px2rem(90);
    padding: px2rem(10) px2rem(15) px2rem(20) px2rem(15);
    box-sizing: border-box;
    .slide-contents-book-img-wrapper {
      flex: 0 0 px2rem(45);
      background: pink;
      .slide-contents-book-img {
        width: px2rem(45);
        height: px2rem(60);
      }
    }
    .slide-contents-book-info-wrapper {
      flex: 1;
      margin: 0 px2rem(10);
      box-sizing: border-box;
      .slide-contents-book-title {
        // 375 * 0.85 = 318.75- 30- 20 - 45 -70  = 153.75
        // width: px2rem(153.75);
        margin-bottom: px2rem(5);
        // line-height: px2rem(16);
        @include left;
        .slide-contents-book-title-text {
          font-size: px2rem(12);
          @include ellipsis2(2);
        }
      }
      .slide-contents-book-author {
        // width: px2rem(153.75);
        font-size: px2rem(12);
        margin-top: px2rem(5);
        @include ellipsis;
        @include left;
        .slide-contents-book-author-text {
        @include ellipsis2(1);
        line-height: px2rem(16) !important;
        }
      }
    }
    .slide-contents-book-progress-wrapper {
      flex: 0 0 px2rem(70);
      .slide-contents-book-progress {
        .progress {
          font-size: px2rem(14);
        }
        .progress-text {
          font-size: px2rem(14);
        }
      }
      .slide-contents-book-time {
        font-size: px2rem(12);
        margin-top: px2rem(5);
      }
    }
  }
  .slide-contents-list {
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-contents-item {
      display: flex;
      padding: px2rem(20) 0;
      .slide-contents-item-label {
        flex: 1;
        font-size: px2rem(14);
        line-height: px2rem(16);
        @include ellipsis2(1);
      }
      .slide-contents-item-page {
        flex: 0 0 px2rem(30);
        font-size: px2rem(10);
        @include right;
      }
    }
  }
  .slide-search-list {
    width: 100%;
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-search-item {
      font-size: px2rem(14);
      line-height: px2rem(16); // 解决英文显示不全
      padding: px2rem(20) 0;
    }
  }
}
</style>
